<template>
    <div class="container" :style="'height: '+docheight+'px'">
        <leftcont></leftcont>
        <div class="righCont">
            <topcont></topcont>
            <div class="content">
                <div class="setCont">
                  <div class="mainTop">
                    <div class="mainTitle">新增教师</div>
                    <btn value="返回列表" @click="backfn"></btn>
                  </div>
                  <div class="formCont">
                    <el-form :model="userInfo" ref="userInfo" :rules="rules" label-width="120px">
                      <el-form-item label="教师头像">
                        <cropperCom @successCropper="getHeadImg" :propImg="userInfo.teacher_head_img"></cropperCom>
                      </el-form-item>
                      <el-form-item label="教师昵称" prop="teacher_nick_name">
                        <el-input v-model="userInfo.teacher_nick_name"></el-input>
                      </el-form-item>
                      <el-form-item label="微信号" prop="teacher_wechat">
                        <el-input v-model="userInfo.teacher_wechat"></el-input>
                      </el-form-item>
                      <el-form-item label="手机号" prop="teacher_mobile">
                        <el-input :maxlength="11" v-model="userInfo.teacher_mobile"></el-input>
                      </el-form-item>
                      <el-form-item label="毕业学院">
                        <el-input v-model="userInfo.graduation_institution"></el-input>
                      </el-form-item>
                      <el-form-item label="教师状态">
                        <el-radio v-model="userInfo.education" label="大专">大专</el-radio>
                        <el-radio v-model="userInfo.education" label="本科">本科</el-radio>
                        <el-radio v-model="userInfo.education" label="研究生">研究生</el-radio>
                      </el-form-item>
                      <el-form-item label="授课经验">
                        <el-input v-model="userInfo.teacher_years"></el-input>
                      </el-form-item>
                      <el-form-item label="教师状态">
                        <el-radio v-model="userInfo.teacher_status" :label="1">正常</el-radio>
                        <el-radio v-model="userInfo.teacher_status" :label="2">禁用</el-radio>
                      </el-form-item>
                      <el-form-item label="关联课程">
                        <div class="cateBox">
                            <div :class="item.check?'cateItem cateActive':'cateItem'" :key="index" v-for="(item,index) in packArr">
                              <div class="packName">{{ item.course_name }}</div>
                              <div class="packType">
                                <el-radio :key="index2" v-for="(item2,index2) in item.course_rule" v-model="item.course_rule_name" :label="item2.rule_name">{{ item2.rule_name }}</el-radio>
                              </div>
                              <div :class="item.check?'saveBtn isActiveBtn':'saveBtn'" @click="chckCateFn(item)">{{ item.check?'取消关联':'关联此课程' }}</div>
                            </div>
                        </div>
                      </el-form-item>
                      <el-form-item label="教师姓名" prop="teacher_name">
                        <el-input v-model="userInfo.teacher_name"></el-input>
                      </el-form-item>
                      <el-form-item label="身份证号" prop="teacher_idcard">
                        <el-input :maxlength="18" v-model="userInfo.teacher_idcard"></el-input>
                      </el-form-item>
                      <el-form-item label="保证金" prop="earnest_money">
                        <el-input :maxlength="5" v-model="userInfo.earnest_money"></el-input>
                      </el-form-item>
                      <el-form-item label="邀请码">
                        <el-input :maxlength="6" placeholder="非必填" v-model="userInfo.user_code"></el-input>
                      </el-form-item>
                      <el-form-item label="教师描述" prop="teacher_introduce">
                        <el-input type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            v-model="userInfo.teacher_introduce">
                        </el-input>
                      </el-form-item>
                      <el-form-item label="成功案例">
                        <btn value="+新增成功案例" @click="addSuccItemFn"></btn>
                      </el-form-item>
                      <el-form-item label=" ">
                        <div class="contentItem" :key="index" v-for="(item,index) in userInfo.case">
                          <el-input v-model="item.name" placeholder="请输入成功案例"></el-input>
                            <el-button class="delBtn" type="danger" @click="delSuccFn(index)" plain>删除</el-button>
                        </div>
                      </el-form-item>
                      <el-form-item label="所获荣誉">
                        <btn value="+新增所获荣誉" @click="addGreadItemFn"></btn>
                      </el-form-item>
                      <el-form-item label=" ">
                        <div class="contentItem" :key="index" v-for="(item,index) in userInfo.honor">
                          <el-input v-model="item.name" placeholder="请输入所获荣誉"></el-input>
                            <el-button class="delBtn" type="danger" @click="delGreadFn(index)" plain>删除</el-button>
                        </div>
                      </el-form-item>
                      <el-form-item label="教学经历">
                        <btn value="+新增教学经历" @click="addLeaveItemFn"></btn>
                      </el-form-item>
                      <el-form-item label=" ">
                        <div class="contentItem" :key="index" v-for="(item,index) in userInfo.experience">
                          <el-input v-model="item.name" placeholder="请输入教学经历"></el-input>
                            <el-button class="delBtn" type="danger" @click="delLeaveFn(index)" plain>删除</el-button>
                        </div>
                      </el-form-item>
                      <el-form-item label="证书资质" prop="technician_introduce">
                        <def-up-img-more :propImg="detailImgList" @successUpImg="getDetailImg"></def-up-img-more>
                      </el-form-item>
                      <el-form-item label="">
                        <btn value="保存" @click="saveFn"></btn>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import leftcont from '@/components/leftCont.vue'
  import topcont from '@/components/topCont.vue'
  import btn from '@/components/public/btn.vue'
  import defUpImgMore from '@/components/public/defUpImgMore.vue'
  import { operateSave,checkPackage} from '@/http/api'
  import cropperCom from '@/components/public/cropperCom.vue'

    export default {
      components: {cropperCom,leftcont,topcont,btn,defUpImgMore},
      data() {
        var checkName = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入教师名称'));
            }else{
                return callback()
            }
        };
        var checkteacher_introduce = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入教师描述'));
            }else{
                return callback()
            }
        };
        var checkNickName = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入教师昵称'));
            }else{
                return callback()
            }
        };
        var check_teacher_wechat = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入微信号'));
            }else{
                return callback()
            }
        };
        var check_teacher_mobile = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入手机号'));
            }else if(!this.$converData.checkPhone(value)){
              return callback(new Error('手机号格式有误'));
            }else{
                return callback()
            }
        };
        var check_teacher_idcard = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入身份证号'));
            }else if(value.length!=18){
              return callback(new Error('身份证号必须为18位数'));
            } else{
                return callback()
            }
        };
        var check_earnest_money = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入保证金'));
            } else{
                return callback()
            }
        };
        
        return {
            packArr:[],
            userInfo:{
              teacher_head_img:'',
              teacher_name:'',
              teacher_introduce:'',
              teacher_nick_name:'',
              teacher_wechat:'',
              teacher_mobile:'',
              education:'本科',
              graduation_institution:'',
              teacher_years:'',
              teacher_status:1,
              teacher_course:[],
              teacher_idcard:'',
              user_code:'',
              earnest_money:'',
              case:[
                {name:''}
              ],
              honor:[
                {name:''}
              ],
              experience:[
                {name:''}
              ],
              qualifications:'',
            },
            detailImgList:[],
            
            techTime:[new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
            rules: {
                teacher_name: [
                    { validator: checkName,required: true,trigger: 'blur' }
                ],
                teacher_introduce:[
                    { validator: checkteacher_introduce,required: true,trigger: 'blur' }
                ],
                teacher_nick_name:[
                    { validator: checkNickName,required: true,trigger: 'blur' }
                ],
                teacher_wechat:[
                  { validator: check_teacher_wechat,required: true,trigger: 'blur' }
                ],
                teacher_mobile:[
                  { validator: check_teacher_mobile,required: true,trigger: 'blur' }
                ],
                teacher_idcard:[
                  { validator: check_teacher_idcard,required: true,trigger: 'blur' }
                ],
                earnest_money:[
                  { validator: check_earnest_money,required: true,trigger: 'blur' }
                ],
                
            }
        }
      },
      props: {},
      methods:{
        backfn(){
          this.$router.back()
        },
        delSuccFn(i){
          this.userInfo.case.splice(i, 1)
        },
        addSuccItemFn(){
          this.userInfo.case.push({name:'',})
        },
        delGreadFn(i){
          this.userInfo.honor.splice(i, 1)
        },
        addGreadItemFn(){
          this.userInfo.honor.push({name:'',})
        },
        delLeaveFn(i){
          this.userInfo.experience.splice(i, 1)
        },
        addLeaveItemFn(){
          this.userInfo.experience.push({name:'',})
        },
        chckCateFn(item){
          item.check = !item.check
        },
        getHeadImg(src){
          this.userInfo.teacher_head_img = src
        },
        getPachStr(){
          let arr = []
          for(var i=0;i<this.packArr.length;i++){
            if(this.packArr[i].check){
              for(let k = 0;k<this.packArr[i].course_rule.length;k++){
                if(this.packArr[i].course_rule[k].rule_name==this.packArr[i].course_rule_name){
                  console.log(i)
                  arr.push({course_rule_name:this.packArr[i].course_rule_name,course_id:this.packArr[i].family_course_id})
                }
              }
            }
          }
          return arr
        },
        getDetailImg(arr){
            if(arr.length>0){
                let newArr = []
                for(let i = 0; i < arr.length; i++){
                    newArr.push(arr[i].img)
                }
                this.userInfo.qualifications = newArr.join(',')
            }else{
                this.userInfo.qualifications = ''
            }
        },
        saveFn(){
          let packArr = this.getPachStr()
          if(packArr.length==0){
            this.$message('请选择关联课程')
            return false
          }
          this.userInfo.teacher_course = packArr
            this.$refs['userInfo'].validate((valid) => {
                if (valid) {
                  this.Submit()
                } else {
                    return false;
                }
            })
        },
        Submit(){
          let data = this.userInfo
          let loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.7)'
          });
          operateSave(data).then((res) => {
            if(res.data.code==1){
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.back()
              }, 1500);
            }else{
              this.$message(res.data.msg)
            }
            loading.close();
          }).catch(()=>{
            loading.close();
            this.$message('网络请求超时');
          })
        },
        getPack(){
          var data ={
          }
          checkPackage(data).then((res)=>{
            if(res.data.code==1){
              for(let i  = 0; i < res.data.data.length; i++){
                res.data.data[i]['check'] = false
                res.data.data[i]['course_rule_name'] = '普通教师'
              }
              this.packArr = res.data.data //把最新的数组赋值给tableData
              console.log(this.packArr)
            }else{
              this.$message(res.data.msg)
            }
          }).catch((err)=>{
            this.$message('服务器请求超时');
          })
        }
      },
      mounted(){
      },
      created() {
        this.getPack()
      },
    }
  </script>
  
  <style scoped lang="less">
  .container{
    width: 100%;
    display: flex;
    overflow: hidden;
    .righCont{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 15px;
      height: 100%;
      width: 10px;
      background-color: #F4F8FF;
      .content{
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        overflow: auto;
        .setCont{
          width: 100%;
          padding: 20px;
          box-sizing: border-box;
          background-color: #fff;
          .mainTop{
            display: flex;
            margin-bottom: 25px;
            align-items: center;
            justify-content: space-between;
            .mainTitle{
              font-size: 14px;
              font-weight: bold;
            }
          }
          .formCont{
            width: 700px;
            .contentItem{
              display: flex;
              padding: 15px;
              box-sizing: border-box;
              background-color: #f7f7f7;
              border-radius: 5px;
              align-items: center;
              margin-bottom: 10px;
              .priceTr{
                margin-bottom: 10px;
              }
              .delBtn{
                margin-left: 15px;
                width: 100px;
              }
            }
            .noFlex{
              display: block;
              .delBtn{
                margin-left: 0;
              }
            }
            .cateBox{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                padding-top: 5px;
                .cateItem{
                    width: 48%;
                    line-height: 32px;
                    box-sizing: border-box;
                    border-radius: 5px;
                    padding: 20px;
                    margin-bottom: 15px;
                    background-color: #f7f7f7;
                    color: #666;
                    cursor: pointer;
                    .packName{
                      color: #000;
                      font-weight: bold;
                    }
                    .packType{
                      margin-bottom: 10px;
                    }
                    .saveBtn{
                      background-color: #916ce0;
                      color: #fff;
                      width: 100%;
                      padding: 5px 0;
                      font-size: 12px;
                      border-radius: 0.25rem;
                      box-sizing: border-box;
                      text-align: center;
                    }
                    .isActiveBtn{
                      background-color: #fff;
                      color: #916ce0;
                    }
                }
                .cateActive{
                  background-color: #e8def8;
                  color: white;
                }
            }
          }
        }
      }
    }
}
  </style>
  <style>
  .el-collapse-item__wrap{
    border-bottom: none;
  }
  .el-collapse{
    border-top: none;
    border-bottom: none;
  }
  .content { overflow: -moz-scrollbars-none; }
  .content::-webkit-scrollbar { width: 0 !important }
  .content { -ms-overflow-style: none; }
 
</style>
<style>
.formImg .el-form-item__content{
 line-height: normal !important;;
}
</style>